<template>
	<view id="app">
		<!-- 蓝色表头 -->
		<view class="blue">
			<view class="blue-title">
				<view class="blue-title-first">
					<text class="blue-title-first-text">3.50</text>
				</view>
				<view class="blue-title-second">
					<text class="blue-title-second-text">业绩比较基准</text>
				</view>
			</view>
			<!-- er -->
			<view class="limitdate">
				<view class="limitdate-left">
					<text class="limitdate-left-text">28</text>
					<view class="limitdate-left-day">
						<text class="limitdate-left-texts">产品期限(天)</text>
					</view>
				</view>
				<view class="limitdate-right">
					<view class="limitdate-right-s">
						<text class="limitdate-left-text">50000</text>
					</view>
					<view class="limitdate-right-x">
						<text class="limitdate-left-texts">起购价格</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 白色 -->
		<view class="revolution">
			<view class="revolution-all">
				<view class="revolution-title">
					<view class="revolution-title-view">
					</view>
					<view class="revolution-title-text">
						<text>投资周期</text>
					</view>
				</view>

				<view class="revolution-procedure">
					<view class="revolution-procedure-all">
						<view class="revolution-procedure-all-pay">
							<view class="pay-bot pay-bot1"></view>
							<view class="pay-paid">
								<text class="paid-text">购买</text>
							</view>
							<view class="pay-date">
								<text class="pay-date-text">2021/3/15</text>
							</view>

						</view>

						<view class="revolution-procedure-all-pay">
							<view class="pay-bot"></view>
							<view class="pay-paid">
								<text class="paid-text">计算收益</text>
							</view>
							<view class="pay-date">
								<text class="pay-date-text">2021/3/18</text>
							</view>

						</view>

						<view class="revolution-procedure-all-pay">
							<view class="pay-bot"></view>
							<view class="pay-paid">
								<text class="paid-text">发放收益</text>
							</view>
							<view class="pay-date">
								<text class="pay-date-text">2021/4/10</text>
							</view>

						</view>

						<view class="revolution-procedure-all-pay">
							<view class="pay-bot"></view>
							<view class="pay-paid">
								<text class="paid-text">到账</text>
							</view>
							<view class="pay-date">
								<text class="pay-date-text">2个交易日期</text>
							</view>

						</view>
					</view>
					<!-- 购买说明 -->
					<view class="emption">
						<view class="emption-title">
							<text class="emption-title-text">购买说明</text>
						</view>
						<view class="emption-info">
							<text class="emption-info-text">
								每28天为一期， 可在到期开放日追加购买或领取;若位领取则默认持续存至下一期
								*当期实际期限以投资周期展示位准，收益按当期实际计息天数计算
							</text>
						</view>

					</view>

				</view>
			</view>

			<!-- 安全保障 -->
			<view class="revolution-all">
				<view class="revolution-title">
					<view class="revolution-title-view">
					</view>
					<view class="revolution-title-text">
						<text>安全保障</text>
					</view>
				</view>

				<view class="revolution-procedure">
					<view class="revolution-procedure-all">
						<view class="revolution-procedure-all-pay1">
							<image class="revolution-procedure-all-pay-img"
								src="../../../static/images/qiluJIquan/48123x.png" mode=""></image>
							<view class="pay-paid">
								<text class="paid-text">知名金融机构</text>
							</view>
						</view>

						<view class="revolution-procedure-all-pay1">
							<image class="revolution-procedure-all-pay-img"
								src="../../../static/images/qiluJIquan/48133x.png" mode=""></image>
							<view class="pay-paid">
								<text class="paid-text">精选优质产品</text>
							</view>
						</view>

						<view class="revolution-procedure-all-pay1">
							<image class="revolution-procedure-all-pay-img"
								src="../../../static/images/qiluJIquan/48143x.png" mode=""></image>
							<view class="pay-paid">
								<text class="paid-text">监管机构备案</text>
							</view>
						</view>
					</view>


					<!-- 购买说明 -->
					<view class="emption">
						<view class="emption-info">
							<text class="emption-info-text">
								该产品属于债券型资管产品，风险较低
							</text>
						</view>

					</view>

				</view>
			</view>

			<!-- 标签切换 -->
			<view class="counter">
				<view class="counter-first">
					<view class="counter-first-title1">
						<text class="counter-first-title1-text">交易规则</text>
						<view class="counter-first-title1-bg"></view>
					</view>
					<view class="counter-first-title">
						信息披露
					</view>
					<view class="counter-first-title">
						常见问题
					</view>
				</view>

				<view class="allreceive">
					<view class="receive">
						<text class="receive-text">购买与领取</text>
					</view>
					<view class="receive">
						<view class="receive-box">
							<text class="receive-text1">购买金额</text>
						</view>
						<view class="receive-box1">
							<text class="receive-text2">50000元起购</text>
						</view>

					</view>
					<view class="receive">
						<view class="receive-box">
							<text class="receive-text1">领取金额</text>
						</view>
						<view class="receive-box1">
							<text class="receive-text2">1000元起，剩余金额不低于1000元</text>
						</view>
					</view>
					<view class="receive">
						<view class="receive-box">
							<text class="receive-text1">到账说明</text>
						</view>
						<view class="receive-box1">
							<text class="receive-text2">资金将在领取后2个交易日内回到原购买银行卡</text>
						</view>

					</view>
					<view class="receive">
						<view class="receive-box">
							<text class="receive-text1">开放日</text>
						</view>
						<view class="receive-box1">
							<text class="receive-text2">可在开放日10点-15点领取，也可以在开放日之前
								预约领取；若未领取则默认续存至下一期。如开
								放日遇到非交易日，可能顺延或提前开放，手机
								按实际计息天数计算</text>
						</view>

					</view>
				</view>
				<view class="allreceive">
					<view class="receive">
						<text class="receive-text">收益与费用</text>
					</view>
					<view class="receive">
						<view class="receive-box">
							<text class="receive-text1">收益规则</text>
						</view>
						<view class="receive-box1">
							<text class="receive-text2">购买的下一个交易日开始计算收益，节假日照常
								计算;受益每日积累，按周期发放(28天)，现
								金受益将在2个交易日内直接发放至原购买银行
								卡</text>
						</view>

					</view>
					<view class="receive">
						<view class="receive-box">
							<text class="receive-text1">费用规则</text>
						</view>
						<view class="receive-box1">
							<text class="receive-text2">购买及领取均无手续费</text>
						</view>
					</view>
				</view>

				<view class="allreceive">
					<view class="receive">
						<text class="receive-text">支持银行列表</text>
					</view>
					<!-- 表格 -->
					<view class="utableall">
						<uni-table class="utable" stripe='true' emptyText="暂无更多数据">
							<uni-tr class="utable-tr">
								<uni-th width="220rpx" align="center">银行列表</uni-th>
								<uni-th width="220rpx" align="center">单笔限额(元)</uni-th>
								<uni-th width="220rpx" align="center">单日限额(元)</uni-th>
							</uni-tr>
							<uni-tr>
								<uni-td align="center">
									<image class="utable-tr-td-img" src="../../../static/images/bankCardList/45933x.png"
										mode=""></image>
									<text>工行</text>
								</uni-td>
								<uni-td align="center">
									<text>5万</text>
								</uni-td>
								<uni-td align="center">
									<text>5万</text>
								</uni-td>
							</uni-tr>
							<uni-tr>
								<uni-td align="center">
									<image class="utable-tr-td-img" src="../../../static/images/bankCardList/45933x.png"
										mode=""></image>
									<text>农行</text>
								</uni-td>
								<uni-td align="center">
									<text>5万</text>
								</uni-td>
								<uni-td align="center">
									<text>5万</text>
								</uni-td>
							</uni-tr>
							<uni-tr>
								<uni-td align="center">
									<image class="utable-tr-td-img" src="../../../static/images/bankCardList/45933x.png"
										mode=""></image>
									<text>中行</text>
								</uni-td>
								<uni-td align="center">
									<text>5万</text>
								</uni-td>
								<uni-td align="center">
									<text>5万</text>
								</uni-td>
							</uni-tr>
							<uni-tr>
								<uni-td align="center">
									<image class="utable-tr-td-img" src="../../../static/images/bankCardList/45933x.png"
										mode=""></image>
									<text>建行</text>
								</uni-td>
								<uni-td align="center">
									<text>5万</text>
								</uni-td>
								<uni-td align="center">
									<text>5万</text>
								</uni-td>
							</uni-tr>

							<uni-tr>
								<uni-td align="center">
									<image class="utable-tr-td-img" src="../../../static/images/bankCardList/45933x.png"
										mode=""></image>
									<text>交行</text>
								</uni-td>
								<uni-td align="center">
									<text>5万</text>
								</uni-td>
								<uni-td align="center">
									<text>5万</text>
								</uni-td>
							</uni-tr>

							<uni-tr>
								<uni-td align="center">
									<image class="utable-tr-td-img" src="../../../static/images/bankCardList/45933x.png"
										mode=""></image>
									<text>招行</text>
								</uni-td>
								<uni-td align="center">
									<text>5万</text>
								</uni-td>
								<uni-td align="center">
									<text>5万</text>
								</uni-td>
							</uni-tr>
							<uni-tr>
								<uni-td align="center">
									<image class="utable-tr-td-img" src="../../../static/images/bankCardList/45933x.png"
										mode=""></image>
									<text>广发</text>
								</uni-td>
								<uni-td align="center">
									<text>5万</text>
								</uni-td>
								<uni-td align="center">
									<text>5万</text>
								</uni-td>
							</uni-tr>
							<uni-tr>
								<uni-td align="center">
									<image class="utable-tr-td-img" src="../../../static/images/bankCardList/45933x.png"
										mode=""></image>
									<text>平安</text>
								</uni-td>
								<uni-td align="center">
									<text>5万</text>
								</uni-td>
								<uni-td align="center">
									<text>5万</text>
								</uni-td>
							</uni-tr>

						</uni-table>

					</view>

				</view>

			</view>
			<!-- 底部 -->
			
			<view class="footer">
				<view class="footer-first">
					<image class="footer-first-img" src="../../../static/images/qiluJIquan/28273x.png" mode=""></image>
				</view>
				<view class="footer-socend">
					<button class="footer-socend-btn" type="default">立即购买</button>
				</view>
			</view>
			<view class="sss-buttom">
				<view class="Card-buttom">
				</view>
			</view>
		</view>
		

	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	#app {
		width: 750rpx;

		// background-color: #4590ef;
		.blue {
			width: 100%;
			height: 400rpx;
			background-image: url(../../../static/images/qiluJIquan/47923x.png);
			background-repeat: no-repeat;
			background-size: cover;

		}

		.blue-title {
			.blue-title-first {
				text-align: center;
				padding-top: 50rpx;

				.blue-title-first-text {
					font-size: 60rpx;
					color: #FFFFFF;
					font-weight: bold;
				}
			}

			.blue-title-second {
				text-align: center;
				margin-top: 10rpx;

				.blue-title-second-text {
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
		}

		.limitdate {
			display: flex;
			justify-content: space-around;
			margin-bottom: 50rpx;
			margin-top: 40rpx;

			.limitdate-left-text {
				font-size: 40rpx;
				color: #FFFFFF;
				font-weight: bold;
			}

			.limitdate-left-texts {
				font-size: 24rpx;
				color: #FFFFFF;
			}

		}

		.revolution {
			width: 100%;
			position: absolute;
			top: 350rpx;
			background-color: #FFFFFF;
			border-radius: 50rpx 50rpx 0 0;

			.revolution-all {
				width: 670rpx;
				margin: 0 auto;

			}

			.revolution-title {
				display: flex;
				// justify-content: space-around;
				padding-top: 44rpx;

				.revolution-title-view {
					width: 10rpx;
					height: 50rpx;
					border-radius: 5rpx;
					background-color: #007AFF;
				}

				.revolution-title-text {
					font-size: 40rpx;
					font-weight: bold;
					padding-left: 10rpx;
				}
			}

			.revolution-procedure {
				margin-top: 24rpx;
				width: 670rpx;
				// height: 400rpx;
				border: 1rpx solid rgb(245, 245, 245);
				border-radius: 10rpx;
				box-shadow: 0, 0, 12rpx, rgba(0, 0, 0, 0.5);

				.revolution-procedure-all {
					display: flex;
					justify-content: space-between;

					.revolution-procedure-all-pay1 {
						margin-top: 20rpx;
						text-align: center;
						flex-grow: 1;
						border-bottom: 1rpx solid #C0C0C0;

						.revolution-procedure-all-pay-img {
							width: 94rpx;
							height: 94rpx;
							padding-top: 20rpx;
						}

						.pay-paid {
							margin-top: 20rpx;
							margin-bottom: 30rpx;
						}

						.paid-text {

							font-size: 24rpx;
							color: #666666;
						}
					}


					.revolution-procedure-all-pay {
						margin-top: 40rpx;
						text-align: center;
						position: relative;
						flex-grow: 1;
						border-top: 1rpx dashed #C0C0C0;
						border-bottom: 1rpx solid #C0C0C0;

						.pay-bot {
							width: 16rpx;
							height: 16rpx;
							border-radius: 50%;
							background-color: #C0C0C0;
							position: absolute;
							left: 75rpx;
							top: -8rpx;
						}

						.pay-bot1 {
							background-color: #007AFF;
						}

						.pay-paid {
							margin-top: 20rpx;

						}

						.paid-text {
							font-size: 24rpx;
							color: #666666;
						}

						.pay-date {
							margin-top: 18rpx;
							margin-bottom: 30rpx;
						}

						.pay-date-text {
							font-size: 24rpx;
							color: #999999;
						}

					}
				}

				.emption {
					display: flex;
					margin-bottom: 30rpx;

					.emption-title {
						width: 200rpx;
						padding-left: 30rpx;
						margin-top: 10rpx;

						.emption-title-text {
							font-size: 24rpx;
							color: #999999;
						}
					}

					.emption-info {
						margin-left: 30rpx;
						margin-top: 10rpx;

						.emption-info-text {
							font-size: 24rpx;
							color: #333333;
							line-height: 20rpx;
						}
					}
				}
			}

			.counter {
				width: 670rpx;
				margin: 0 auto;

				.counter-first {
					display: flex;
					margin-top: 10rpx;
					background-color: rgb(245, 245, 245);

					.counter-first-title1 {
						margin-top: 10rpx;
						text-align: center;

						.counter-first-title1-text {
							font-size: 32rpx;
							color: #3476f1;
							font-weight: bold;
						}

						.counter-first-title1-bg {
							margin-top: 14rpx;
							margin-bottom: 20rpx;
							width: 60rpx;
							height: 5rpx;
							margin-left: 30rpx;
							background-color: #3476f1;
							border-radius: 5rpx;
						}
					}

					.counter-first-title {
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #999999;
						margin-left: 60rpx;
					}
				}

				.allreceive {
					margin-top: 30rpx;
					margin-bottom: 30rpx;
					padding-left: 30rpx;
					border-radius: 10rpx;
					border: 1rpx solid rgb(245, 245, 245);
					box-shadow: 0 0 12rpx, rgba(0, 0, 0, 0.5);
				}

				.receive {
					display: flex;
					// height: 100rpx;
					border-top: 1rpx solid rgb(245, 245, 245);

					.receive-box {
						margin-top: 30rpx;
						margin-bottom: 30rpx;
					}

					.receive-box1 {
						margin-top: 30rpx;
						margin-bottom: 30rpx;
						margin-left: 30rpx;
					}

					.receive-text {
						line-height: 100rpx;
						font-size: 28rpx;
						color: #333333;
					}

					.receive-text1 {
						width: 300rpx;
						font-size: 24rpx;
						color: #999999;
					}

					.receive-text2 {
						font-size: 24rpx;
						color: #333333;

					}

				}
			}


		}

		.utableall {
			// width: 660rpx;
			padding-right: 20rpx;
			.utable {
				// width: 670rpx;
				padding: 0;
				.utable-tr{
					padding: 0;
				}
			}
			.utable-tr-td-img {
				width: 30rpx;
				height: 30rpx;
				padding-right: 20rpx;
			}
		}
		.footer{
			display: flex;
			justify-content: space-between;
			width: 750rpx;
			height: 88rpx;
			.footer-first-img{
				width: 28rpx;
				height: 36rpx;
				padding-top:30rpx;
				padding-left: 30rpx;
			}
			.footer-socend{
				.footer-socend-btn{
					width: 640rpx;
					height: 88rpx;
					background-color: #007AFF;
					border: 0;
					color: #FFFFFF;
					font-size: 28rpx;
					line-height: 88rpx;
				}
			}
		}
		.sss-buttom{
			width: 750rpx;
			margin-top: 40rpx;
			// background-color: #808080;
		}
		.Card-buttom {
			width: 300rpx;
			height: 10rpx;
			margin-left: 200rpx;
			margin-bottom: 30rpx;
			background-color: black;
			border-radius: 10rpx;
		}

	}
</style>
